<template>
  <view class="sidebar-mask" @tap.self="close">
    <view class="sidebar">
      <view class="sidebar-header">
        <image class="sidebar-logo" src="/static/logo.png" mode="heightFix" />
      </view>
      <scroll-view scroll-y class="sidebar-content">
        <view v-for="group in menuGroups" :key="group.title" class="menu-group">
          <view class="group-title">{{ group.title }}</view>
          <view v-for="item in group.items" :key="item" class="menu-item" @tap="onMenu(item)">{{ item }}</view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
const emit = defineEmits(['close'])
function close() {
  emit('close')
}
const menuGroups = [
  {
    title: '生物年龄计算器',
    items: ['人类的博茨血龄时代', 'Levine PhenoAge计算器']
  },
  {
    title: '资源',
    items: ['推荐的长寿实验室测试', '如何准备血液检查', '铁状态解释器']
  },
  {
    title: '生物标志物',
    items: ['C肽', '葡萄糖', '糖化血红蛋白', '胰岛素', '白蛋白', '载脂蛋白A1', '载脂蛋白B', '高密度脂蛋白', '低密度脂蛋白', '脂蛋白(a)', '甘油三酯', '极低密度脂蛋白', '肌酐', '肾小球滤过率', '尿酸', 'AST', 'ALT', '总胆红素', '直接胆红素', '铁蛋白', '叶酸', '血红蛋白', 'HoloTC', '同型半胱氨酸', '妇幼保健院', '平均血红蛋白(MCV)', '血小板', '红细胞', '红细胞分布宽度', '转铁蛋白饱和度', '维生素B12', '抗TPO', '游离甲状腺素3', '游离甲状腺素4', 'T3', '促甲状腺激素', '脱氢表雄酮', '雌二醇', '促卵泡激素', '黄体生成素', '性激素结合球蛋白', '睾酮', '孕酮', '超敏C反应蛋白', '淋巴细胞', '单核细胞(绝对值)', '中性粒细胞(绝对值)', '维生素D-25(OH)D', '白细胞', '总前列腺特异抗原']
  }
]
function onMenu(item) {
  // 可根据 item 跳转或 emit 事件
  uni.showToast({ title: item, icon: 'none' })
}
</script>

<style scoped>
.sidebar-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.3);
  z-index: 9999;
  display: flex;
}
.sidebar {
  width: 70vw;
  max-width: 520rpx;
  background: #fff;
  height: 100vh;
  box-shadow: 4rpx 0 16rpx #ccc;
  display: flex;
  flex-direction: column;
}
.sidebar-header {
  padding: 32rpx 0 16rpx 32rpx;
}
.sidebar-logo {
  height: 60rpx;
}
.sidebar-content {
  flex: 1;
  padding: 0 0 32rpx 0;
}
.menu-group {
  margin-bottom: 32rpx;
}
.group-title {
  font-size: 28rpx;
  color: #888;
  margin: 16rpx 0 8rpx 32rpx;
}
.menu-item {
  font-size: 30rpx;
  color: #333;
  padding: 12rpx 0 12rpx 48rpx;
  border-bottom: 1rpx solid #f5f5f5;
}
.menu-item:last-child {
  border-bottom: none;
}
</style> 